<template>
  <div class="user_main">
    <div
      class="modify_background"
      v-on:click="modify_close"
      name="modify_background"
      id="modify_background"
    >
      <div class="modify" v-on:click="funModify">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="Account:">
            <el-input v-model="modify_account" readonly></el-input>
          </el-form-item>
          <el-form-item label="UID:">
            <el-input v-model="modify_uid" readonly></el-input>
          </el-form-item>
           <el-form-item label="Role:">
            <el-radio v-model="modify_role" label="0">Student</el-radio>
            <el-radio v-model="modify_role" label="1">Teacher</el-radio>
          </el-form-item>
          <el-form-item label="Nickname:">
            <el-input
              v-model="modify_name"
              placeholder="User Nickname"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="User Phone:">
            <el-input
              v-model="modify_phone"
              placeholder="User phone"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="Character:">
            <el-select
              v-model="value"
              @change="getValuModify"
              filterable
              multiple
              placeholder="Please choose"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="Account status:">
            <el-radio v-model="modify_status" label="1">Abandon</el-radio>
            <el-radio v-model="modify_status" label="0">Activate</el-radio>
          </el-form-item>
          <br />
          <el-form-item label="Sex:">
            <el-radio v-model="modify_sex" label="0">Hidden</el-radio>
            <el-radio v-model="modify_sex" label="1">Male</el-radio>
            <el-radio v-model="modify_sex" label="2">Female</el-radio>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" v-on:click="modifyUser">Modify</el-button>
          </el-form-item>
        </el-form>
        <span style="font-size: 15px; bottom: 0px"
          >Click on the outside to close this windos</span
        >
      </div>
    </div>
    <div
      class="add_background"
      v-on:click="add_close"
      name="add_background"
      id="add_background"
    >
      <div class="add" v-on:click="funFirst">
        <span style="color: red; display: none" id="accountSpan"
          >Account Not available</span
        >
        <br />
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="Account:">
            <el-input
              v-model="add_account"
              placeholder="User Account"
              @blur="accountValid"
            ></el-input>
          </el-form-item>
          <el-form-item label="Role:">
            <el-radio v-model="add_role" label="0">Student</el-radio>
            <el-radio v-model="add_role" label="1">Teacher</el-radio>
          </el-form-item>
          <el-form-item label="Nickname:">
            <el-input v-model="add_name" placeholder="User Nickname"></el-input>
          </el-form-item>
          <br />
          <el-form-item label="Default Password:">
            <el-input
              v-model="defaultPassword"
              placeholder="User Password"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="Character:">
            <el-select
              v-model="value"
              @change="getValue"
              filterable
              multiple
              placeholder="Please choose"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="Account status:">
            <el-radio v-model="add_status" label="1">Abandon</el-radio>
            <el-radio v-model="add_status" label="0">Activate</el-radio>
          </el-form-item>
          <br />
          <el-form-item label="Sex:">
            <el-radio v-model="add_radio" label="0">Hidden</el-radio>
            <el-radio v-model="add_radio" label="1">Male</el-radio>
            <el-radio v-model="add_radio" label="2">Female</el-radio>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" v-on:click="addNewUser">Add</el-button>
          </el-form-item>
        </el-form>
        <span style="font-size: 15px; bottom: 0px"
          >Click on the outside to close this windos</span
        >
      </div>
    </div>

    <div class="userInfo_search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="UID:">
          <el-input v-model="uid" placeholder="User UID"></el-input>
        </el-form-item>
        <el-form-item label="Account:">
          <el-input v-model="account" placeholder="User Account"></el-input>
        </el-form-item>
        <el-form-item label="Character:">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="User Character"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="Account status:">
          <el-radio v-model="status" label="1">Abandon</el-radio>
          <el-radio v-model="status" label="0">Activate</el-radio>
        </el-form-item>
        <el-form-item label="Sex:">
          <el-radio v-model="radio" label="0">Hidden</el-radio>
          <el-radio v-model="radio" label="1">Male</el-radio>
          <el-radio v-model="radio" label="2">Female</el-radio>
          <el-radio v-model="radio" label="-1">All</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUserInfoData"
            >Search</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 70%; width: 100%">
      <div
        style="
          width: auto;
          height: 11%;
          background-color: rgb(245, 255, 255);
          text-align: left;
          padding-left: 20px;
        "
      >
        <el-button v-on:click="btn_add">
          <a style="font-size: 20px">Add</a>
        </el-button>
      </div>
      <div
        style="height:84%
                  width:auto;
                  background-color:rgb(255,255,255);"
      >
        <el-table :data="tableData" @row-click="openDetails">
          <el-table-column prop="no" label="ID"></el-table-column>
          <el-table-column prop="uid" label="UID"></el-table-column>
          <el-table-column prop="userAccount" label="Account"></el-table-column>
          <el-table-column prop="userSex" label="Sex"></el-table-column>
          <el-table-column prop="userRole" label="Role"></el-table-column>
          <el-table-column
            prop="characterName"
            label="Character"
          ></el-table-column>
          <el-table-column label="Action">
            <el-button type="" @click="btn_modify">Modify</el-button>
          </el-table-column>
        </el-table>
      </div>

      <div class="page_nav">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
let user = JSON.parse(sessionStorage.getItem("user"));
export default {
  name: "user",
  data() {
    return {
      restaurants: [],
      timeout: null,
      tableData: [],
      state: "",
      radio: "-1",
      status: "0",
      uid: "",
      account: "",
      add_state: "",
      add_radio: "0",
      add_status: "0",
      add_account: "",
      add_name: "",
      add_characterId: [],
      add_role:"0",
      defaultPassword: "Password",
      options: [],
      value: "",
      modify_account: "",
      modify_name: "",
      modify_uid: "",
      modify_phone: "",
      modify_sex: "0",
      modify_status: "0",
      modify_characterId: [],
      modify_role:"0",
      userId: "",
      totalPage: 10,
      currentPage: 1,
    };
  },
  created() {},
  methods: {
    getUserInfoData() {
      let token = sessionStorage.getItem("token");
      let that = this;
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/user-info/getUserInfo",
        params: {
          uid: that.uid,
          userSex: that.radio,
          userAccount: that.account,
          characterName: that.state,
          userAbandon: that.status,
        },
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.totalPage = result.data.data.totalCount
          let x = 1;
          for (let i of result.data.data.data) {
            switch (i.userSex) {
              case 0:
                i.userSex = "Hidden";
                break;
              case 1:
                i.userSex = "Male";
                break;
              case 2:
                i.userSex = "Female";
                break;
              default:
                i.userSex = "(none)";
            }
            if (i.characterName == null) {
              i.characterName = "(none)";
            }
            switch(i.userRole) {
              case 0:
              i.userRole = "Student";
              break;
              case 1:
              i.userRole = "Teacher";
              break;
              case 2:
              i.userRole = "Admin";
              break;
              case 3:
              i.userRole = "ADMINISTRATOR";
              break;
            }
            i.no = x++;
          }
          that.tableData = result.data.data.data;
        } else {
          that.totalPage = 0
          that.tableData = null;
          alert(result.data.msg);
        }
      });
    },
    loadAll() {},
    querySearchAsync(queryString, cb) {
      let token = sessionStorage.getItem("token");
      let that = this;
      let resultData;
      let returnData = [];
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/character-info/getCharacter?pageMax=20",
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        resultData = result.data.data.data;
        if (result.data.code === "0") {
          for (let i in resultData) {
            returnData.push({
              value: resultData[i].characterName,
              id: resultData[i].id,
            });
          }
          cb(returnData);
        } else {
          alert(result.data.msg);
        }
      });
    },
    handleSelect(item) {},
    btn_add() {
      var btn = document.getElementById("add_background");
      btn.style.display = "block";
    },
    add_close() {
      var btn = document.getElementById("add_background");
      btn.style.display = "none";
    },
    funFirst() {
      event.stopPropagation();
    },
    loadCharacter() {
      let token = sessionStorage.getItem("token");
      let that = this;
      let resultData;
      let returnData = [];
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/character-info/getCharacter?pageMax=20",
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        resultData = result.data.data.data;
        if (result.data.code === "0") {
          for (let i in resultData) {
            returnData.push({
              value: resultData[i].characterName,
              id: resultData[i].id,
            });
          }
          that.options = returnData;
        } else {
          alert(result.data.msg);
        }
      });
    },
    accountValid() {
      let account = this.add_account;
      let token = sessionStorage.getItem("token");
      let that = this;
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/Welcome/accountValid",
        params: {
          userAccount: account,
        },
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          console.log(result.data.data);
          if (result.data.data === false) {
            document.getElementById("accountSpan").style.display = "block";
          } else {
            document.getElementById("accountSpan").style.display = "none";
          }
        }
      });
    },
    getValue(id) {
      this.add_characterId = [];
      for (let i in id) {
        this.add_characterId.push(id[i]);
      }
    },
    addNewUser() {
      let token = sessionStorage.getItem("token");
      let that = this;
      console.log(this.add_characterId);
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/addUser",
        data: JSON.stringify({
          uid: user.uid,
          userAccount: that.add_account,
          userPassword: that.defaultPassword,
          userName: that.add_name,
          characterId: that.add_characterId,
          userSex: that.add_radio,
          userRole:that.add_role
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.getUserInfoData();
          var btn = document.getElementById("add_background");
          btn.style.display = "none";
        } else {
          alert(result.data.msg);
        }
      });
    },
    modifyUser() {
      let token = sessionStorage.getItem("token");
      let that = this;
      if(this.modify_role=="ADMINISTRATOR"){
        this.modify_role = 3;
      }
      if(this.modify_role == "ADMIN"){
        this.modify_role = 2;
      }
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/modifyUser",
        data: JSON.stringify({
          uid: user.uid,
          id: that.userId,
          userName: that.modify_name,
          characterId: that.modify_characterId,
          userSex: Number(that.modify_sex),
          userAbandon: Number(that.modify_status),
          userPhone: that.modify_phone,
          userRole:that.modify_role
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.currentPage = 1;
          that.getUserInfoData();
          var btn = document.getElementById("modify_background");
          btn.style.display = "none";
        } else {
          alert(result.data.msg);
        }
      });
    },
    getValuModify(id) {
      this.modify_characterId = [];
      for (let i in id) {
        this.modify_characterId.push(id[i]);
      }
    },
    btn_modify() {
      var btn = document.getElementById("modify_background");
      btn.style.display = "block";
    },
    openDetails(row) {
      this.modify_account = row.userAccount;
      this.modify_uid = row.uid;
      this.modify_name = row.userName;
      if(row.userPhone!=null){
        this.modify_phone = row.userPhone;
      }
      this.userId = row.id;
      this.modify_role = row.userRole;
      switch (row.userSex) {
        case "Male":
          this.modify_sex = "1";
          break;
        case "Female":
          this.modify_sex = "2";
          break;
        case "Hidden":
          this.modify_sex = "0";
          break;
      }
      switch (row.userRole) {
        case "Student":
          this.modify_role = "0";
          break;
        case "Teacher":
          this.modify_role = "1";
          break;
        default:{
          
        }
      }
      if (!row.userAbandon) {
        this.modify_status = "0";
      } else {
        this.modify_status = "1";
      }
    },
    modify_close() {
      var btn = document.getElementById("modify_background");
      btn.style.display = "none";
    },
    funModify() {
      event.stopPropagation();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let token = sessionStorage.getItem("token");
      let that = this;
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/user-info/getUserInfo",
        params: {
          uid: that.uid,
          userSex: that.radio,
          userAccount: that.account,
          characterName: that.state,
          userAbandon: that.status,
          pageNo:val
        },
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          let x = 1;
          for (let i of result.data.data.data) {
            switch (i.userSex) {
              case 0:
                i.userSex = "Hidden";
                break;
              case 1:
                i.userSex = "Male";
                break;
              case 2:
                i.userSex = "Female";
                break;
              default:
                i.userSex = "(none)";
            }
            if (i.characterName == null) {
              i.characterName = "(none)";
            }
            switch(i.userRole) {
              case 0:
              i.userRole = "Student";
              break;
              case 1:
              i.userRole = "Teacher";
              break;
              case 2:
              i.userRole = "Admin";
              break;
              case 3:
              i.userRole = "ADMINISTRATOR";
              break;
            }
            i.no = x++;
          }
          that.tableData = result.data.data.data;
        } else {
          that.tableData = null;
          alert(result.data.msg);
        }
      });
    },
  },

  mounted() {
    this.restaurants = this.loadAll();
    this.getUserInfoData();
    this.loadCharacter();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#user {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.user_main {
  width: 98%;
  margin: auto;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: gray 5px 5px 10px;
}
.userInfo_search {
  height: 20%;
  background-color: aliceblue;
  border-radius: 15px 15px 0px 0px;
}
.page_nav {
  margin-top: 1%;
  background-color: aliceblue;
  height: 17%;
  border-radius: 0px 0px 15px 15px;
  position: relative;
}
.add {
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 600px;
  height: 400px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.add_background {
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.modify {
  padding: 5%;
  z-index: 10;
  position: relative;
  width: 600px;
  height: 400px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_background {
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
</style>
